<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板插值</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        #h1 {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app" style="text-align: center;">
        <!--
            {{}}：这个就是vue中的插值语法，这个语法可以把当前组件中定义的属性的值插入到指定位置
            如果组件中的属性具有响应性，那么这种插值将默认实现数据绑定的效果（数据变化后页面上的渲染会同步更新）
            v-once: 这个属性表示这个标签中的内容只会渲染一次，后续数据变化不会重新渲染
        -->
        <h1 v-once>这里是模板的内容:{{count}}次点击</h1>
        <button v-on:click="clickButton">点击</button>
        <br>
        <!--
            这里countHTML是一个HTML片段，如果直接放到{{}}中，它会当作文件并不会渲染
            如果要解析HTML片段，需要使用v-html属性
        -->
        <h1>这里插值内容：{{countHTML}}</h1>
        <h1>这里插件内容：<span v-html="countHTML"></span></h1>
        <!--
            这里会为下面的h1标签绑定一个id属性，值为响应数据id1的值
            除了id属性，其他属性也可以使用v-bind绑定，只需要在属性名前加上v-bind:即可
        -->
        <h1 v-bind:id="id1">这里是模板内容：{{count}}次</h1>
    </div>

<script>
    /* 从Vue3 中解板出createApp和ref两个API,用于未来创建应用和定义响应式数据 */
    const {createApp,ref} = Vue
    let config = {
        setup() {
            // 定义数据
            const count = ref(0)
            const countHTML = ref("<span style='color:red;'>100</span>")
            const id1 = ref("h1")
            // 定义方法
            const clickButton = () => {
                count.value ++
            }
            // 把数据与方法交出去
            return { count,countHTML,id1, clickButton }
        }
    }
    // 创建应用实例并进行应用挂载
    const app = createApp(config)
    app.mount('#app')

</script>
</body>
</html>